<template>
    <view class="warehouse-in-add">
       <u-form>
            <view class="add-section">
				<u-input title="品名" placeholder="填写品名" v-model="warehouseInDetailData.detail.spzs" labelWidth="160" :rules="warehouseInDetailData.rules.spzs"></u-input>
				<u-select title="纱支" placeholder="请选择" @click="openWpggPicker('纱支')" :value="warehouseInDetailData.detail.wpggA" labelWidth="160" :rules="warehouseInDetailData.rules.wpggA"></u-select>
				<u-input title="品牌" placeholder="填写品牌" v-model="warehouseInDetailData.detail.spcd" labelWidth="160" :rules="warehouseInDetailData.rules.spcd"></u-input>
				<u-input :digit="UNIT_WEIGHT_DIGIT" title="件重" type="digit" placeholder="填写件重" v-model="warehouseInDetailData.detail.spjsl" labelWidth="160" :rules="warehouseInDetailData.rules.spjsl">
					<template v-slot:icon>
					    <text class="font-black">KG</text>
					</template>
				</u-input>
				<u-input :digit="NUMBER_DIGIT" type="digit" title="件数" placeholder="填写件数" v-model="warehouseInDetailData.detail.spjs" labelWidth="160" :rules="warehouseInDetailData.rules.spjs"></u-input>
				<u-input :digit="NUMBER_DIGIT" title="重量" placeholder="填写重量" v-model="getSpsl" labelWidth="160" :readonly="true">
					<template  v-slot:icon>
					    <text class="font-black">吨</text>
					</template>
				</u-input>
                <u-input title="批次" placeholder="填写批次" v-model="warehouseInDetailData.detail.spbh" labelWidth="160" :rules="warehouseInDetailData.rules.spbh"></u-input>
                <u-input title="柜号" placeholder="填写柜号" v-model="warehouseInDetailData.detail.spgh" labelWidth="160"></u-input>
				<u-select title="用途" placeholder="请选择" @click="openWpggPicker('用途')" :value="warehouseInDetailData.detail.wpggD" labelWidth="160"></u-select>
				<u-select title="产地" placeholder="请选择" @click="openWpggPicker('产地')" :value="warehouseInDetailData.detail.wpggE" labelWidth="160"></u-select>
				<u-select title="工艺" placeholder="请选择" @click="openWpggPicker('工艺')" :value="warehouseInDetailData.detail.wpggB" labelWidth="160"></u-select>
				<u-select title="工序" placeholder="请选择" @click="openWpggPicker('工序')" :value="warehouseInDetailData.detail.wpggC" labelWidth="160"></u-select>
				<u-select title="漂染性" placeholder="请选择" @click="openWpggPicker('漂染性')" :value="warehouseInDetailData.detail.wpggF" labelWidth="160"></u-select>
				<u-input title="颜色" placeholder="请填写颜色" v-model="warehouseInDetailData.detail.wpggH" labelWidth="160"></u-input>
				<u-input title="备注" placeholder="填写货物备注" v-model="warehouseInDetailData.detail.itbz" labelWidth="160"></u-input>
            </view>
            <view class="warehouse-in-add-attention display-flex justify-center align-center">
                <image src="@/static/icons/attention.png" class="attention-icon"/>
                <text class="font-CE0C0C font-24 ml-5">请完善货物信息，方便您找货！</text>
            </view>
            <view class="display-flex justify-between warehouse-in-add-btn font-30">
                <view class="left-btn">
                    <button @click="handleSave('保存更多')">保存并继续添加</button>
                </view>
                <view class="right-btn pull-right">
                    <button @click="handleSave('保存')">保存</button>
                </view>
            </view>
        </u-form>
        <u-popup :show="yarnCountData.showPicker" @close="changeYarnCountPicker">
        	<template v-slot:content>
        		<view class="shazhi display-flex flex-wrap">
        		    <view v-for="(item, index) in yarnCountData.columns" :key="item" :class="yarnCountData.active === index?'active item':'item'" @click="yarnCountDataConfirm(item, index)">
        		        <text>{{ item }}</text>
        		    </view>
        		</view>
        	</template>
        </u-popup>
    </view>
  </template>
  <script setup lang="ts">
    import { stock } from '@/api'
    import { reactive, ref, computed } from 'vue'
    import type { Ref } from 'vue'
    import { tip, storage } from '@/utils'
    import { WEIGHT_DIGIT, NUMBER_DIGIT, UNIT_WEIGHT_DIGIT } from '@/utils/constant'
    import type { WarehouseInDetailData, YarnCountData} from '@/@type/warehouseIn'
	import { onLoad } from '@dcloudio/uni-app';


    const warehouseInDetailData: any = reactive({
		rules:{
			spzs:[{required: true, message:'请填写品名'}],
			wpggA:[{required: true, message:'请选择纱支'}],
			spcd:[{required: true, message:'请填写品牌'}],
			spjsl:[{required: true, message:'请填写件重'}],
			spjs:[{required: true, message:'请填写件数'}],
			spbh:[{required: true, message:'请填写批次'}]
		},
        detail: {
            itbz: '',
			spbh: '',
			spcd: '',
			spcwid: '',
			spgh: '',
			spjs: '',
			spjsl: '',
			spmc: '',
			spsl: '-',
			spzs: '',
			ssrqid: '',
			wpggA: '',
			wpggB: '',
			wpggC: '',
			wpggD: '',
			wpggE: '',
			wpggF: '',
			wpggG: '',
			wpggH: ''
        }
    })
    const yarnCountData: any = reactive({
        query:{},
        showPicker: ref(false),
        listA:[],
        listB:[],
        listC:[],
        listD:[],
        listE:[],
        listF:[],
        columnsA:[],
        columnsB:[],
        columnsC:[],
        columnsD:[],
        columnsE:[],
        columnsF:[],
		activeA:'',
		activeB:'',
		activeC:'',
		activeD:'',
		activeE:'',
		activeF:'',
        list:[],
        columns:[],
        select:'',
		active:'',
    })
    const saveType: Ref<string> = ref('')

    const getSpsl = computed(() => {
        let spsl = '-'
        const spjs = warehouseInDetailData.detail.spjs
        const spjsl = warehouseInDetailData.detail.spjsl
        if(spjs && spjsl) {
            spsl = (parseFloat(spjs)*parseFloat(spjsl)*0.001).toFixed(WEIGHT_DIGIT)
        }
        warehouseInDetailData.detail.spsl = spsl
        return spsl
    })

    onLoad(() => {
        yarnCount()
    })

    const yarnCount = () => {
        stock.getYarnCount(yarnCountData.query).then((res:any) => {
            const data = res.data
            yarnCountData.listA = data['a']
            yarnCountData.listB = data['b']
            yarnCountData.listC = data['c']
            yarnCountData.listD = data['d']
            yarnCountData.listE = data['e']
            yarnCountData.listF = data['f']
            yarnCountData.columnsA = yarnCountData.listA.map((a: any) => a.name)
            yarnCountData.columnsB = yarnCountData.listB.map((a: any) => a.name)
            yarnCountData.columnsC = yarnCountData.listC.map((a: any) => a.name)
            yarnCountData.columnsD = yarnCountData.listD.map((a: any) => a.name)
            yarnCountData.columnsE = yarnCountData.listE.map((a: any) => a.name)
            yarnCountData.columnsF = yarnCountData.listF.map((a: any) => a.name)
        })
    }

    const openWpggPicker = (data: any) => {
        if(data == '纱支') {yarnCountData.columns = yarnCountData.columnsA;yarnCountData.active = yarnCountData.activeA}
        if(data == '工艺') {yarnCountData.columns = yarnCountData.columnsB;yarnCountData.active = yarnCountData.activeB}
        if(data == '工序') {yarnCountData.columns = yarnCountData.columnsC;yarnCountData.active = yarnCountData.activeC}
        if(data == '用途') {yarnCountData.columns = yarnCountData.columnsD;yarnCountData.active = yarnCountData.activeD}
        if(data == '产地') {yarnCountData.columns = yarnCountData.columnsE;yarnCountData.active = yarnCountData.activeE}
        if(data == '漂染性') {yarnCountData.columns = yarnCountData.columnsF;yarnCountData.active = yarnCountData.activeF}
        yarnCountData.select = data
        changeYarnCountPicker()
    }

    const yarnCountDataConfirm = (data: any, index:number) => {
		yarnCountData.active=index
        if(yarnCountData.select == '纱支') {warehouseInDetailData.detail.wpggA = data;yarnCountData.activeA = index}
        if(yarnCountData.select == '工艺') {warehouseInDetailData.detail.wpggB = data;yarnCountData.activeB = index}
        if(yarnCountData.select == '工序') {warehouseInDetailData.detail.wpggC = data;yarnCountData.activeC = index}
        if(yarnCountData.select == '用途') {warehouseInDetailData.detail.wpggD = data;yarnCountData.activeD = index}
        if(yarnCountData.select == '产地') {warehouseInDetailData.detail.wpggE = data;yarnCountData.activeE = index}
        if(yarnCountData.select == '漂染性') {warehouseInDetailData.detail.wpggF = data;yarnCountData.activeF = index}
        changeYarnCountPicker()    
    }

    const changeYarnCountPicker = () =>  {
        yarnCountData.showPicker = !yarnCountData.showPicker
    }

    const handleSave = (data:string) => {
        saveType.value = data
		onSave()
    }

    const  onSave = () => {
		const detail = warehouseInDetailData.detail
		const rules = warehouseInDetailData.rules
		for(let i in rules) {
			for(let j in rules[i] ) {
				if(rules[i][j].required === true && !detail[i]) {
					return tip.showToast(rules[i][j].message)
				}
			}
		}
		if(Number(detail.spjsl) === 0) return tip.showToast('件重不能为0')
		if(Number(detail.spjs) === 0) return tip.showToast('件数不能为0')
		if(Number(detail.spjsl) < 0) return tip.showToast('件重必须大于0')
		if(Number(detail.spjs) < 0) return tip.showToast('件数必须大于0')
        const data = storage.getLocalStorage('warehouseIn')
        data.inp.push(warehouseInDetailData.detail)
        storage.setLocalStorage('warehouseIn', data)
        if(saveType.value == '保存') goAppoint()
        if(saveType.value == '保存更多'){
            tip.showToast('已保存，请继续添加')
            formReset()
        }
    }

    const goAppoint = () => {
        uni.navigateBack()
    }

    const formReset = () => {
        warehouseInDetailData.detail = {
            itbz: '',
			spbh: '',
			spcd: '',
			spcwid: '',
			spgh: '',
			spjs: '',
			spjsl: '',
			spmc: '',
			spsl: '',
			spzs: '',
			ssrqid: '',
			wpggA: '',
			wpggB: '',
			wpggC: '',
			wpggD: '',
			wpggE: '',
			wpggF: '',
			wpggG: '',
			wpggH: ''
        }
    }

</script>
<style lang="scss" scoped>
    .warehouse-in-add {
        .add-section {
            margin-top:36rpx;
        }
        &-attention {
            margin-top:150rpx;
			.attention-icon {
				width:24rpx;
				height: 24rpx;
			}
        }
        &-btn {
            padding:30rpx 0rpx 80rpx;
            .left-btn {
                width:435rpx;
                height: 90rpx;
                button {
					width:435rpx;
					height:90rpx;
					background-color: #255FB6;
                    border-radius:10rpx;
					color:#fff;
                } 
            }
            .right-btn {
                width:213rpx;
                height: 90rpx;
                button {
					width:213rpx;
					height: 90rpx;
                    border-radius:10rpx;
                    color:#000; 
                }         
            }
        }
		.shazhi {
			.item {
			    min-width:135rpx;
			    padding:0 20rpx;
			    display:inline-block;
			    height:60rpx;
			    line-height: 60rpx;
			    color:#999;
			    text-align:center;
			    border-radius:30rpx;
			    border:1rpx solid #999;
			    margin:15rpx;
			    &.active {
			        color:#fff;
			        border:1rpx solid #255FB6;
			        background:#255FB6;
			    }
			}
		}
    }
</style>